<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>故障追踪</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <el-button type="primary" class="handle-del" @click="dialogFormVisible = true">故障登记</el-button>
      <el-select placeholder="筛选省份" class="handle-select mr10" v-model="select_province" @change="searchByProvince">
        <el-option
          v-for="item in select_province_data"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select placeholder="筛选结果" class="handle-select mr10" v-model="select_handle_result"
                 @change="searchByHandleResult">
        <el-option
          v-for="item in select_handle_result_data"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="key_word" placeholder="请输入设备编号" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="search" @click="searchByProvince">搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="设备编号">
              <span>{{ props.row.equipment.machineCode }}</span>
            </el-form-item>
            <el-form-item label="设备类型">
              <span>{{ props.row.equipment.equipmentType }}</span>
            </el-form-item>
            <el-form-item label="省份">
              <span>{{ props.row.equipment.province }}</span>
            </el-form-item>
            <el-form-item label="城市">
              <span>{{ props.row.equipment.city }}</span>
            </el-form-item>
            <el-form-item label="客户姓名">
              <span>{{ props.row.equipment.customerName }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.equipment.telephone }}</span>
            </el-form-item>
            <el-form-item label="故障类型">
              <el-tag type="danger">{{ props.row.faultType }}</el-tag>
            </el-form-item>
            <el-form-item label="故障时间">
              <span>{{ props.row.faultTime }}</span>
            </el-form-item>
            <el-form-item label="反馈人电话">
              <span>{{ props.row.feedbackPhoneNum }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.handleResult == 1" label="处理详情">
              <span>{{ props.row.handleDetail }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.handleResult == 1" label="处理人">
              <span>{{ props.row.handler }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.handleResult == 1" label="处理时间">
              <span>{{ props.row.handleTime }}</span>
            </el-form-item>
            <el-form-item v-if="props.row.handleResult == 1" label="处理结果">
              <el-tag type="success" size="medium">已处理</el-tag>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="equipment.machineCode" label="设备编号" sortable>
      </el-table-column>
      <el-table-column prop="equipment.province" label="省份">
      </el-table-column>
      <el-table-column prop="equipment.customerName" label="客户姓名">
      </el-table-column>
      <el-table-column prop="equipment.telephone" label="联系方式">
      </el-table-column>
      <el-table-column prop="faultType" label="故障类型">
      </el-table-column>
      <el-table-column prop="faultTime" label="故障时间">
      </el-table-column>
      <el-table-column prop="feedbackPhoneNum" label="反馈人电话" width="120">
      </el-table-column>
      <el-table-column label="处理结果">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.handleResult == 1" type="success" size="medium">已处理</el-tag>
          <el-tag v-else-if="scope.row.handleResult == 0" type="danger" size="medium">未处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a @click="openDialogHandleDetailLog(scope.row)" style="cursor: pointer">
            <i class="el-icon-view" title="处理详情查看与修改"></i>
          </a>&nbsp;&nbsp;
          <a @click="edit_fault_info(scope.row)" style="cursor: pointer">
            <i class="el-icon-edit" title="修改"></i>
          </a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="故障登记" width="65%" :visible.sync="dialogFormVisible" @close='faultLogCloseDialog'>
      <el-form :model="faultLogForm" :rules="faultLogRules" ref="faultLogForm">
        <el-row>
          <el-col :span="11">
            <el-form-item label="地区" prop="areas" :label-width="formLabelWidth">
              <el-cascader expand-trigger="hover" size="large" :options="options" v-model="faultLogForm.areas"
                           @change="getProvinceCity">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备类型" prop="equipmentType" :label-width="formLabelWidth">
              <el-select v-model="faultLogForm.equipmentType" placeholder="请选择">
                <el-option v-for="item in equipmentTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备编号" prop="machineCode" :label-width="formLabelWidth">
              <el-input v-model="faultLogForm.machineCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="故障类型" prop="faultType" :label-width="formLabelWidth">
              <el-input v-model="faultLogForm.faultType" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="故障时间" prop="faultTime" :label-width="formLabelWidth">
              <el-date-picker v-model="faultLogForm.faultTime" align="right" type="date" placeholder="选择日期"
                              :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="反馈人电话" prop="feedbackPhoneNum" :label-width="formLabelWidth">
              <el-input v-model="faultLogForm.feedbackPhoneNum" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="faultLogFormSubmit('faultLogForm')">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="故障修改" width="65%" :visible.sync="dialogEditFaultInfo" @close='editFaultInfoCloseDialog'>
      <el-form :model="editFaultInfoForm" :rules="editFaultInfoFormRules" ref="editFaultInfoForm">
        <el-row>
          <el-col :span="11">
            <el-form-item label="地区" prop="areas" :label-width="formLabelWidth">
              <el-cascader expand-trigger="hover" size="large" :options="options" v-model="editFaultInfoForm.areas"
                           @change="getEditProvinceCity">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备类型" prop="equipmentType" :label-width="formLabelWidth">
              <el-select v-model="editFaultInfoForm.equipmentType" placeholder="请选择">
                <el-option v-for="item in equipmentTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备编号" prop="machineCode" :label-width="formLabelWidth">
              <el-input v-model="editFaultInfoForm.machineCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="故障类型" prop="faultType" :label-width="formLabelWidth">
              <el-input v-model="editFaultInfoForm.faultType" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="故障时间" prop="faultTime" :label-width="formLabelWidth">
              <el-date-picker v-model="editFaultInfoForm.faultTime" align="right" type="date" placeholder="选择日期"
                              :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="反馈人电话" prop="feedbackPhoneNum" :label-width="formLabelWidth">
              <el-input v-model="editFaultInfoForm.feedbackPhoneNum" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFaultInfo = false">取 消</el-button>
        <el-button type="primary" @click="editFaultInfoSubmit('editFaultInfoForm')">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="处理详情查看与修改" @close='handleDetailLogCloseDialog' width="40%"
               :visible.sync="dialogHandleDetailLogForm">
      <el-form :model="handleDetailLogForm" :rules="handleDetailLogFormRules" ref="handleDetailLogForm">
        <el-row>
          <el-col :span="22">
            <el-form-item label="处理详情" prop="handleDetail" :label-width="formLabelWidth">
              <el-input type="textarea" :rows="2" v-model="handleDetailLogForm.handleDetail">
              </el-input>
            </el-form-item>
            <el-form-item label="处理人" prop="handler" :label-width="formLabelWidth">
              <el-input v-model="handleDetailLogForm.handler" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="处理时间" prop="handleTime" :label-width="formLabelWidth">
              <el-date-picker v-model="handleDetailLogForm.handleTime" align="right" type="date" placeholder="选择日期"
                              :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="处理结果" prop="handleResult" :label-width="formLabelWidth">
              <el-radio v-model="handleDetailLogForm.handleResult" label="0">未处理</el-radio>
              <el-radio v-model="handleDetailLogForm.handleResult" label="1">已处理</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogHandleDetailLogForm = false">取 消</el-button>
        <el-button type="primary" @click="handleDetailLogFormSubmit('handleDetailLogForm')">确 定</el-button>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size=size
        layout="total, prev, pager, next"
        :total=count>
      </el-pagination>
    </div>
  </div>
</template>

<script>

  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data'

  export default {
    components: {
      ElCol,
      ElRow
    },
    data() {
      var checkFeedbackPhoneNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('电话号不能为空'));
        }
        setTimeout(() => {
          var mobilePhone = /^1\d{10}$/;
          var fixedPhone = /^0\d{2,3}-?\d{7,8}$/;
          if (!mobilePhone.test(value) && !fixedPhone.test(value)) {
            callback(new Error('请输入正确的电话号'));
          } else {
            callback();
          }
        }, 1000);
      };
      return {
        faultInfoId: 0,
        equipmentTypeOptions: [
          {
            value: '手法仪',
            label: '手法仪'
          }, {
            value: '腧穴仪',
            label: '腧穴仪'
          }],
        options: provinceAndCityData,
        tableData: [],
        cur_page: 1,
        count: 0,
        size: 10,
        multipleSelection: [],
        select_province: '',
        select_handle_result: '',
        select_province_data: ['全部', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
        select_handle_result_data: [
          {label: '全部', value: -1},
          {label: '未处理', value: 0},
          {label: '已处理', value: 1}
        ],
        key_word: '',
        is_search: false,
        dialogTableVisible: false,
        dialogEditFaultInfo: false,
        dialogHandleDetailLogForm: false,
        dialogFormVisible: false,
        dialogDetailVisible: false,
        faultLogForm: {
          feedbackPhoneNum: '',
          province: '',
          city: '',
          equipmentType: '',
          machineCode: '',
          faultType: '',
          faultTime: '',
        },
        editFaultInfoForm: {
          areas: [],
          feedbackPhoneNum: '',
          province: '',
          city: '',
          equipmentType: '',
          machineCode: '',
          faultType: '',
          faultTime: '',
        },
        handleDetailLogForm: {
          handleDetail: '',
          handler: '',
          handleTime: '',
          handleResult: '0',
        },
        faultLogRules: {
          areas: [
            {required: true, type: 'array', trigger: 'change', message: '请选择地区',}//这里需要用到全局变量
          ],
          equipmentType: [
            {required: true, trigger: 'blur', message: '请选择设备类型',}//这里需要用到全局变量
          ],
          faultType: [
            {required: true, trigger: 'blur', message: '请输入故障类型',}//这里需要用到全局变量
          ],
          faultTime: [
            {required: true, trigger: 'blur', message: '请输入安装时间',}
          ],
          machineCode: [
            {required: true, trigger: 'blur', message: '请输入设备编号',}
          ],
          feedbackPhoneNum: [
            {validator: checkFeedbackPhoneNum, trigger: 'blur'}
          ]
        },
        editFaultInfoFormRules: {
          areas: [
            {required: true, type: 'array', trigger: 'change', message: '请选择地区',}//这里需要用到全局变量
          ],
          equipmentType: [
            {required: true, trigger: 'blur', message: '请选择设备类型',}//这里需要用到全局变量
          ],
          faultType: [
            {required: true, trigger: 'blur', message: '请输入故障类型',}//这里需要用到全局变量
          ],
          faultTime: [
            {required: true, trigger: 'blur', message: '请输入安装时间',}
          ],
          machineCode: [
            {required: true, trigger: 'blur', message: '请输入设备编号',}
          ],
          feedbackPhoneNum: [
            {validator: checkFeedbackPhoneNum, trigger: 'blur'}
          ]
        },
        handleDetailLogFormRules: {
          handleDetail: [
            {required: true, trigger: 'blur', message: '请输入处理详情',}//这里需要用到全局变量
          ],
          handler: [
            {required: true, trigger: 'blur', message: '请输入处理人姓名',}//这里需要用到全局变量
          ],
          handleTime: [
            {required: true, trigger: 'blur', message: '请输入处理时间',}
          ],
          handleResult: [
            {required: true, trigger: 'change', message: '请选择处理结果',}
          ],
        },
        formLabelWidth: '100px',
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        faultTime: "",
        handleResult: '1',
        handleDetailDateValue: '',
      };
    },
    created() {
      this.getData();
    },
    methods: {
      faultLogCloseDialog() {
        this.getData();
      },
      editFaultInfoCloseDialog() {
        this.getData();
      },
      handleDetailLogCloseDialog() {
        this.getData();
      },
      openDialogHandleDetailLog(row) {
        let self = this;
        self.faultInfoId = row.id;
        self.$axios.get('/api/faultInfo/getFaultInfoById?id=' + row.id).then(function (response) {
          var result = response.data;
          if (result.status == "200") {
            self.handleDetailLogForm.handleDetail = result.data.handleDetail;
            self.handleDetailLogForm.handler = result.data.handler;
            self.handleDetailLogForm.handleTime = result.data.handleTime;
            self.handleDetailLogForm.handleResult = "" + result.data.handleResult;
          }
        });
        self.dialogHandleDetailLogForm = true;
      },
      edit_fault_info(row) {
        let self = this;
        self.faultInfoId = row.id;
        self.$axios.get('/api/faultInfo/getFaultInfoById?id=' + row.id).then(function (response) {
          var result = response.data;
          if (result.status == "200") {
            let province = TextToCode[result.data.equipment.province].code;
            let city = TextToCode[result.data.equipment.province][result.data.equipment.city].code;
            self.editFaultInfoForm.areas = [province, city];
            self.editFaultInfoForm.equipmentType = result.data.equipment.equipmentType;
            self.editFaultInfoForm.machineCode = result.data.equipment.machineCode;
            self.editFaultInfoForm.faultType = result.data.faultType;
            self.editFaultInfoForm.faultTime = result.data.faultTime;
            self.editFaultInfoForm.feedbackPhoneNum = result.data.feedbackPhoneNum;
          }
        });
        self.dialogEditFaultInfo = true;
      },
      handleCurrentChange(val) {
        this.cur_page = val;
        this.getData();
      },
      getProvinceCity(value) {
        this.faultLogForm.province = CodeToText[this.faultLogForm.areas[0]];
        this.faultLogForm.city = CodeToText[this.faultLogForm.areas[1]];
      },
      getEditProvinceCity(value) {
        this.editFaultInfoForm.province = CodeToText[this.editFaultInfoForm.areas[0]];
        this.editFaultInfoForm.city = CodeToText[this.editFaultInfoForm.areas[1]];
      },
      searchByProvince() {
        this.getData();
      },
      searchByHandleResult() {
        this.getData();
      },
      getData() {
        let self = this;
        self.$axios.get('/api/faultInfo/list', {
          params: {
            keyWord: self.key_word,
            province: self.select_province,
            handleResult: self.select_handle_result,
            current: self.cur_page,
            size: self.size
          }
        }).then(function (response) {
          console.log(response)
          var result = response.data;
          self.tableData = result.data;
          self.count = result.page.total;
        })
      },
      faultLogFormSubmit(formName) {
        let self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios.post('/api/faultInfo/add', {
              equipment: {
                province: self.faultLogForm.province,
                city: self.faultLogForm.city,
                equipmentType: self.faultLogForm.equipmentType,
                machineCode: self.faultLogForm.machineCode,
              },
              'feedbackPhoneNum': self.faultLogForm.feedbackPhoneNum,
              'faultType': self.faultLogForm.faultType,
              'faultTime': self.faultLogForm.faultTime,
            }).then(function (response) {
              console.log(response)
              var result = response.data;
              if (result.status == "200") {
                self.$message({
                  type: 'success',
                  message: result.message
                });
              } else {
                self.$message.error(result.message);
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      editFaultInfoSubmit(formName) {
        let self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios.post('/api/faultInfo/edit', {
              equipment: {
                province: CodeToText[this.editFaultInfoForm.areas[0]],
                city: CodeToText[this.editFaultInfoForm.areas[1]],
                equipmentType: self.editFaultInfoForm.equipmentType,
                machineCode: self.editFaultInfoForm.machineCode,
              },
              'id': self.faultInfoId,
              'faultType': self.editFaultInfoForm.faultType,
              'feedbackPhoneNum': self.editFaultInfoForm.feedbackPhoneNum,
              'faultTime': self.editFaultInfoForm.faultTime,
            }).then(function (response) {
              console.log(response)
              var result = response.data;
              if (result.status == "200") {
                self.$message({
                  type: 'success',
                  message: result.message
                });
              } else {
                self.$message.error(result.message);
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleDetailLogFormSubmit(formName) {
        let self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios.post('/api/faultInfo/handleDetailLog', {
              'id': self.faultInfoId,
              'handleDetail': self.handleDetailLogForm.handleDetail,
              'handler': self.handleDetailLogForm.handler,
              'handleTime': self.handleDetailLogForm.handleTime,
              'handleResult': self.handleDetailLogForm.handleResult,
            }).then(function (response) {
              console.log(response)
              var result = response.data;
              if (result.status == "200") {
                self.$message({
                  type: 'success',
                  message: result.message
                });
              } else {
                self.$message.error(result.message);
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
